<style lang="scss">

  $size:30px;

  .toggle-group{
    width:$size;
    height:$size;
    display: inline-block;
    position: relative;
    float: left;
  }
  .select-toggle{
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    /*visibility: hidden;*/
    opacity: 0;
    left:0;
    top:0;
    width:$size;
    height:$size;
    &:checked ~.icon-rem-pwd{
      background-image:url("../../assets/images/ellipse_active.png");
    }
  }

  .icon-rem-pwd{
    width:$size;
    height:$size;
    display: inline-block;
    background-image:url("../../assets/images/ellipse.png");
    background-size:cover ;
  }

</style>
<template>
  <div class="toggle-group">
    <input  class="select-toggle"
            type="checkbox" :name="'Toggle'+Math.random()"/>
    <span class="icon-rem-pwd"></span>
    <!--<span class="icon-rem-pwd-select"></span>-->
  </div>
</template>

<script>
   export default {
     name: 'Toggle',
     props: ['checked']
   }
</script>
